<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <style>
        .box{
            width: 450px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid lightgray;
            
        }
        ul{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
            font-size: inherit;
            color:inherit;
        }
        header{
            background-color: lightblue;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        header span{
            position: relative;
             padding: 0 15px; 
            display: inline-block;
            height: 100%;
        }
        header ul{
            position: absolute;
            left: 0;
             width: 82px; 
            text-align: center;
            padding: 10px 5px; 
            display: none; 
            border: 1px solid lightgray; 
        }
        header>span>a:hover {
            color: red;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="box">
        <header>
            <span>
                <a href="#">公司简介</a>
                <ul>
                    <li>公司简介</li>
                    <li>公司简介</li>
                    <li>公司简介</li>
                </ul>
            </span>
            <span>
                <a href="#">产品介绍</a>
                <ul>
                    <li>产品介绍</li>
                    <li>产品介绍</li>
                    <li>产品介绍</li>
                </ul>
            </span>
            <span>
                <a href="#">联系我们</a>
                <ul>
                    <li>联系我们</li>
                    <li>联系我们</li>
                    <li>联系我们</li>
                </ul>
            </span>
            <span>
                <a href="#">人才招聘</a>
                <ul>
                    <li>人才招聘</li>
                    <li>人才招聘</li>
                    <li>人才招聘</li>
                </ul>
            </span>
        </header>
    </div>
    <script src="jquery-3.2.1.js"></script>
</body>
</html>
<script>
    $('span').each(function(index){
       $('span').eq(index).hover(function(){
        //    $('a').eq(index).css('color','black');
           $('ul').eq(index).css('display','block');
       },function(){
       
           $('ul').eq(index).css('display','none');
       })
    })

    $('li').each(function(index){
        $('li').eq(index).hover(function(){
            $('li').eq(index).css('text-decoration','underline').css('color','red')
            .siblings().css('text-decoration','none').css('color','black');
           
        },function(){
             $('li').eq(index).css('text-decoration','none').css('color','black');
        })
    })
</script>